<template>
	<div>
		<NavCom left_text="" @right-click="search()" @left-click="$router.back()" bg_color="#fafafa">
			<template #icon_left>
				<span class="iconfont  icon-fanhuijiantouxiangqingye"></span>
			</template>
			<template #title>
				<input type="text" v-model="searchObj.query" class="searchBox" placeholder="请求输入关键字">
			</template>
			<template #icon_right>
				<span class="iconfont icon-sousuo"></span>
			</template>
		</NavCom>
		<div class="nav-main">
			<div @click="showLay=true" :class="{'active':searchObj.main_sort==4||searchObj.main_sort==0}">{{val1}} <span
					class="xxsmall">▼</span>
			</div>
			<div @click="$set(searchObj,'main_sort',1)" :class="{'active':searchObj.main_sort==1}">销量</div>
			<!-- 单击价格  设置价格有选中的sel类 -->
			<div @click="setSortPrice()" :class="{'sel':searchObj.main_sort==2}">
				<!-- 如果sort等于2 文字就会高亮 -->
				<span :class="{'active':searchObj.main_sort==2}">价格</span>
				<!-- 如果当前orderby的值为asc 添加act类名 -->
				<span class="col">
					<span class="xxsmall" :class="{'act':searchObj.sort_by=='asc'}">▲</span>
					<span class="xxsmall" :class="{'act':searchObj.sort_by=='dsc'}">▼</span></span>
			</div>
			<div>筛选</div>

		</div>
		<div class="lay" v-if="showLay">
			<div class="item" @click="searchIt(4,'新品')">
				新品优先
			</div>
			<div class="item" @click="searchIt(0,'综合')">
				综合排序
			</div>
		</div>
		<div class="list" v-if="searchResult.list_v2">
			<div class="item" v-for="product in searchResult.list_v2" :key="product.body.product_id">
				<ViewSearchProduct :data="product.body" v-if="product.view_type=='view_search_product'">
				</ViewSearchProduct>
			</div>

		</div>
	</div>
</template>
<script>
	import Vue from 'vue';
	import {
		DropdownMenu,
		DropdownItem
	} from 'vant';

	Vue.use(DropdownMenu);
	Vue.use(DropdownItem);
	import 'vant/lib/dropdown-menu/style';
	import 'vant/lib/dropdown-item/style';
	import NavCom from '@/components/NavCom.vue'
	// 导入搜索api
	import {
		Search
	} from '@/api/search.js'
	// 导入组件
	import ViewSearchProduct from '@/components/ViewSearchProduct.vue'

	export default {
		components: {
			NavCom,
			ViewSearchProduct
		},
		data() {
			return {
				// 定义搜索条件
				searchObj: {
					query: '', //搜索关键字
					page_index: 1, // 当前页
					page_size: 20, //每页数量
					client_id: 180100031051, //当前用户id
					version: 2, //版本
					webp: 1,
					channel_id: '',
					activity_id: '',
					activity_type: '',
				},
				searchResult: {},
				val1: '新品', //第一条件显示的文本
				showLay: false, //是不是显示弹框

			}
		},
		created() {
			this.search();
		},
		methods: {
			setSortPrice() {
				// 为还说呢么通过$set 因为首次单击的时候可能没有 "main_sort" 需要动态添加用$set这个方法
				// 只要单击 都会把"main_sort"设置为2
				this.$set(this.searchObj, "main_sort", 2);
				// 如果没有sortby属性就添加sortby属性
				if (!this.searchObj.sort_by) {
					this.$set(this.searchObj, "sort_by", 'asc');
				} else {
					// 如果属性是asc 就变为dsc
					if (this.searchObj.sort_by === 'asc') {
						this.searchObj.sort_by = 'dsc'
					} else {
						// 就变成 asc
						this.searchObj.sort_by = 'asc'
					}
				}
				// 执行搜索
				this.search();
			},
			// 当单击选项的时候
			searchIt(main_sort, val1) {
				// 强制更新搜索条件 main_sort
				this.$set(this.searchObj, "main_sort", main_sort);
				// 执行搜索
				this.search();
				// 关闭弹框
				this.showLay = false;
				// 更新第一个选项的文本
				this.val1 = val1;
			},
			search() {
				Search(this.searchObj)
					.then(res => {
						// 输出搜索的内容
						this.searchResult = res.data.data;
						console.log(res.data.data)
					})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-main {
		display: flex;
		height: .88rem;
		line-height: .88rem;
		background-color: #fafafa;
		color: #777
	}

	.nav-main .active {
		color: #f70;
	}

	.nav-main>div {
		flex: 1;
		text-align: center;

		.xxsmall {
			font-size: .2rem;
			transform: scale(.7);

		}

		.col {
			display: inline-block;
			line-height: .18rem;
			vertical-align: middle;
		}

		.col .xxsmall {
			// 默认是灰色
			color: #999;
			display: block;
		}

	}

	// 如果父组件有sel 当前组件有act 类名才高亮
	.nav-main .sel .act.xxsmall {
		color: #f70 !important;
	}

	.lay {
		background-color: rgba(0, 0, 0, .3);
		position: fixed;
		top: 1.76rem;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.lay .item {
		height: .88rem;
		line-height: .88rem;
		background-color: #fff;
		padding: 0 .3rem;
	}

	.searchBox {
		flex: 1;
		line-height: .60rem;
		width: 100%;
		border: none;
		background-color: #fff;
	}
</style>
